<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui">
<body>
	<ui:composition>
		<p:panelGrid style="width: 100%;">
			<f:facet name="header">
				<p:row>
					<p:column>
						<h:outputText value="Remarks" />
					</p:column>
				</p:row>
			</f:facet>
			<p:row rendered="#{not backingBean.remarksEditable}">
				<p:column>
					<pre><h:outputText value="#{backingBean.remarks}" /></pre>
				</p:column>
			</p:row>
			<p:row rendered="#{backingBean.remarksEditable}">
				<p:column>
					<p:inputTextarea value="#{backingBean.remarks}" style="resize:vertical;width: 100%"
						rows="3" 
						counter="display" maxlength="1024"
						counterTemplate="{0} characters remaining.">
						<p:ajax event="keyup" update="#{updateDirty}"
							listener="#{backingBean.markDirty}" />
					</p:inputTextarea>
					<br />
					<h:outputText id="display" />
				</p:column>
			</p:row>
		</p:panelGrid>


	</ui:composition>
</body>
</html>